<template>
  <div class="page-specialty">
    <!-- 商品展示 -->
    <div class="goods-show">
      <div class="goods-item"
           v-for="item in goods"
           :key="item.id">
        <!-- TODO:商品图片 -->
        <img :src="item.goodsImg"
             @click="showGoodsDetail(item.id)"
             alt="">
        <!-- 商品描述 -->
        <div class="goods-desc">
          <h3 class="title">{{item.goodsName}}</h3>
          <p>{{item.desc}}</p>
        </div>
        <span class="goods-price">￥{{item.goodsPrice}}</span>
        <button class="car-add"
                @click="addToCar(item)">加入购物车</button>
      </div>
    </div>
    <!-- 购物车 -->
    <div class="goods-car">
      <h3>购物车列表</h3>
      <div class="car-list">
        <!-- 列表每一项 -->
        <div class="list-item"
             v-for="item in goodsCar"
             :key="item.id">
          <input type="checkbox"
                 v-model="item.ischeck">
          <img :src="item.goodsImg"
               alt="">
          <div class="right-info">
            <h4>{{item.title}}</h4>
            <div class="goods-num">
              <div class="goods-price">￥<span>{{item.goodsPrice}}</span></div>
              <div class="goods-orc">
                <button @click="redNum(item)">-</button>
                <span>{{item.num}}</span>
                <button @click="addNum(item)">+</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 购物车操作 -->
      <div class="car-total"
           v-if="goodsCar.length>0">
        <div class="price">总价格:<strong>￥</strong><span>{{totalPrice}}</span></div>
        <button @click="submitOrder">提交订单</button>
      </div>
      <!-- TODO:购物车商品为空时，显示空状态 -->
      <el-empty v-else
                description="还没有商品呢"
                :image-size="150"></el-empty>
    </div>

    <!-- 遮罩层 -->
    <div class="mask"
         v-if="isShowMask">
      <div class="mask-bg"
           @click="isShowMask =false"></div>
      <!-- 商品信息展示（全部详情） -->
      <div class="goods-detail">
        <img :src="goodsDetail.goodsImg"
             alt="">
        <div class="detail-desc">
          <h3>{{goodsDetail.goodsName}}</h3>
          <p>{{goodsDetail.desc}}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getToken } from '@/request/token'
import { goodslist, saveOrder } from '@/api/article' // 接口
export default {
  data() {
    return {
      isShowMask: false, // 点击图片展示商品详情内容
      //展示商品列表
      goods: [],
      // 详情商品信息
      goodsDetail: {},
      // 购物车信息
      goodsCar: []
    }
  },
  methods: {
    /* 商品添加到购物车 */
    addToCar(item) {
      let that = this
      let isExit = false
      this.goodsCar.forEach(carItem => {
        if (carItem.id == item.id) {
          that.$message('warning', '该商品已经添加', 1000)
          isExit = true
        }
      })
      if (!isExit) {
        this.goodsCar.push({
          id: item.id,
          ischeck: true,
          goodsImg: item.goodsImg,
          goodsName: item.goodsName,
          goodsPrice: item.goodsPrice,
          num: 1
        })
      }
    },
    /* 显示商品详细信息 */
    showGoodsDetail(goodsId) {
      this.isShowMask = true
      // 显示对应id的详情内容
      this.goodsDetail = this.goods.filter(item => item.id == goodsId)[0]
    },
    // 增加商品数量
    redNum(item) {
      if (item.num <= 1) {
        return false
      }
      item.num--
    },
    // 增加商品数量
    addNum(item) {
      item.num++
    },
    /* 提交订单 */
    submitOrder() {
      if (getToken()) {
        // 获取选中的
        let buyList = this.goodsCar.filter(item => item.ischeck)
        if (buyList.length) {
          // 只提交商品id,num
          let buyarr = buyList.map(item => {
            return {
              id: item.id,
              num: item.num
            }
          })
          // 提交订单
          console.log(buyarr)
          saveOrder(buyarr).then(res => {
            console.log(res)
          })
          return false
        }
        this.$message('warning', '购物车为空', 1000)
      } else {
        this.$message('warning', '请先登录', 1000)
      }
    },
    // 获取商品列表
    async initGoodList() {
      let { data: res } = await goodslist()
      console.log(res.data.records)
      this.goods = res.data.records
    }
  },
  computed: {
    // 总价格计算
    totalPrice() {
      let sum = 0
      this.goodsCar.forEach(item => {
        if (item.ischeck) {
          sum += item.goodsPrice * item.num
        }
      })
      return sum.toFixed(2)
    }
  },
  created() {
    this.initGoodList()
  }
}
</script>

<style lang="less" scoped>
.page-specialty {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
  width: 1060px;
  /* 购物列表 */
  .goods-show {
    width: 760px;
    min-height: 300px;
    /* 商品每一项 */
    .goods-item {
      margin-top: 20px;
      display: flex;
      align-items: center;
      height: 150px;
      border-bottom: 1px solid #ccc;
      img {
        width: 120px;
        height: 120px;
        border-radius: 4px;
        cursor: pointer;
      }
      /* 商品描述 */
      .goods-desc {
        margin-left: 40px;
        height: 120px;
        width: 320px;
        .title {
          color: #000;
        }
        p {
          padding-top: 5px;
          font-size: 13px;
          letter-spacing: 1px;
          color: #000;
          display: -webkit-box;
          overflow: hidden;
          white-space: normal !important;
          text-overflow: ellipsis;
          word-wrap: break-word;
          -webkit-line-clamp: 4;
          -webkit-box-orient: vertical;
        }
      }
      .goods-price {
        width: 100px;
      }
      /* 添加到购物车按钮 */
      .car-add {
        padding: 5px 15px;
        color: #fff;
        border: 1px solid #33c5c5;
        background-color: #33c5c5;
        border-radius: 24px;
        cursor: pointer;
      }
    }
  }
  /* 购物车 */
  .goods-car {
    margin-top: 30px;
    width: 250px;
    min-height: 300px;
    h3 {
      line-height: 30px;
      font-size: 16px;
    }
    .car-list {
      margin-top: 5px;
      border-top: 1px solid #ccc;
      /* 购物车列表具体每一项 */
      .list-item {
        margin: 10px 0;
        display: flex;
        align-items: center;
        height: 60px;
        input {
          margin-right: 20px;
          -webkit-appearance: none; /*清除复选框默认样式*/
          border: 1px solid #33c5c5;
          width: 13px;
          height: 13px;
          border-radius: 50%;
          &:checked {
            background: url('@/assets/images/check-bgi.png');
            background-size: 100% 100%;
          }
        }
        img {
          width: 50px;
          height: 50px;
          border-radius: 4px;
        }
        .right-info {
          flex: 1;
          margin-left: 20px;
          height: 50px;
          h4 {
            color: #000;
          }
          .goods-num {
            margin-top: 5px;
            display: flex;
            justify-content: space-between;
            .goods-price {
              font-size: 14px;
            }
            .goods-orc {
              button {
                width: 16px;
                height: 16px;
                outline: none;
                border: 1px solid #33c5c5;
                background-color: transparent;
                color: #33c5c5;
                border-radius: 2px;
                cursor: pointer;
              }
              span {
                padding: 0 7px;
              }
            }
          }
        }
      }
    }
    /* 价格，生成订单 */
    .car-total {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 30px;
      min-height: 50px;
      border-top: 1px solid #ccc;
      .price {
        font-family: '黑体';
        span {
          font-weight: 600;
        }
      }
      button {
        padding: 5px 15px;
        border-radius: 20px;
        border: none;
        background-color: #33c5c5;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  /* 遮罩层 */
  .mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    .mask-bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
    }
    /* 商品内容详情 */
    .goods-detail {
      z-index: 99;
      display: flex;
      width: 500px;
      min-height: 250px;
      padding: 20px 25px;
      background-color: #fff;
      border-radius: 6px;
      box-sizing: border-box;
      img {
        width: 150px;
        height: 150px;
        border-radius: 6px;
      }
      .detail-desc {
        margin-left: 30px;
        h3 {
          padding-bottom: 5px;
        }
        p {
          line-height: 24px;
          font-size: 14px;
        }
      }
    }
  }
}
</style>